<template>
	<video ref="videoPlayer" class="video-js"></video>
</template>

<script lang="ts" setup>
//@ts-ignore
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import zh from "video.js/dist/lang/zh-CN.json";
import {computed, onMounted, onUnmounted, ref, watch} from "vue";

const videoPlayer = ref(null)
const player = ref(null)
const props = defineProps({
  source: {
    type: Object,
    default: () => {
      return {}
    }
  }
})


const videoSource = computed(() => {
  console.log(props.source.type)
  return {
    type: props.source.type, //  取值文件后缀；这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看 https://videojs.com/getting-started
    src: props.source.src // url 地址
  }
})

const options = computed(()=>{
  return {
    muted: false,
    controls: true,
    autoplay: true,
    loop: true,
    language: "zh-CN",
    techOrder: ["html5"],
    playbackRates: [0.5, 1.0, 1.5, 2.0], // 播放速度

    // loop: false, // 导致视频一结束就重新开始。
    // preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
    // language: 'zh-CN',
    // aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
    // fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
    sources: [videoSource.value], //  视频源信息
    notSupportedMessage: '此视频暂无法播放，请稍后再试',
    controlBar: {
      timeDivider: true,
      durationDisplay: true,
      remainingTimeDisplay: false,
      fullscreenToggle: true // 全屏按钮
    }
  }
})

onMounted(() => {
  console.log(options.value);
  videojs.addLanguage("zh-CN", zh);
  player.value = videojs(videoPlayer.value, options.value)

})
onUnmounted(() => {
  if(player.value) {
    player.value.dispose()
  }
})

</script>

<style lang="stylus" scoped>

.video-js {
  width: 100%;
  height: 50%;
  padding: 0;
  color: #409EFF;

  // 播放按钮
  >>> .vjs-big-play-button {
    border-radius: 50%;
    border: 6px solid #409EFF;
    left: calc(50% - 1em);
    top: calc(50% - 1em);
    width: 2.5em;
    height: 2.5em;
    line-height: 2.5em;
    background: transparent;
    box-sizing: content-box;
    .vjs-icon-placeholder:before {
      font-size: 48px;
    }
    &:hover {
      opacity: 0.6;
    }
  }


}
</style>
